<template>
    <van-nav-bar :title="alertext" safe-area-inset-top	@click-left="onClickLeft" left-text="返回" fixed="'true" placeholder left-arrow>

    </van-nav-bar>
    <div>
        <van-popup v-model:show="showPicker" round >
            <van-picker
                    :columns="columns"
                    @cancel="showPicker = false"
                    @confirm="onConfirm"
            />
        </van-popup>
    </div>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
                    v-model="prjname"
                    name="项目名称"
                    label="项目名称"
                    placeholder="请输入项目名称"
                    right-icon="search"
                    clearable
                    @change="onSearch"
                    :rules="[{ required: true, message: '请选择项目名称' }]"
            />
            <van-field
                    v-model="code"
                    readonly
                    type="number"
                    name="code"
                    label="项目编码"
                    placeholder="请点击搜索选择项目"
                    :rules="[{ required: true, message: '没有选择项目，请点击搜索选择项目' }]"
            />
            <van-field
                    v-model="username"
                    name="username"
                    label="姓名"
                    placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写劳务员|劳资员|项目经理的姓名' }]"
            />
            <van-field
                    v-model="idcardnum"
                    name="idcardnum"
                    label="身份证号码"
                    placeholder="请填写管理人员身份证信息"
                    :rules="[{ required: true, message: '请填写劳务员|劳资员|项目经理的身份证信息' }]"
            />
            <van-field
                    v-model="phone"
                    type="tel"
                    name="phone"
                    label="电话"
                    placeholder="电话"
                    :rules="[{ required: true, message: '请填写电话' }]"
            />
            <van-field
                    v-model="cardNum"
                    name="cardNum"
                    label="考勤卡号"
                    placeholder="请输入考勤卡号"
                    :rules="[{ required: true, message: '请填写考勤卡号' }]"
            />
            <van-field name="worktype" label="岗位信息">
                <template #input>
                    <van-radio-group v-model="worktype" direction="horizontal">
                        <van-radio name="G001">项目经理</van-radio>
                        <van-radio name="G014">总监理工程师</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>


<script>
    // 1. 引入你需要的组件
    import { Search ,Form, Field, CellGroup,Picker ,Popup ,showToast ,RadioGroup, Radio ,Button ,showDialog ,NavBar } from 'vant';
    // 2. 引入组件样式
    import 'vant/lib/index.css';
    import { ref } from 'vue';
    import axios from "axios";



    export default {
        setup() {
            const onClickLeft = () => history.back();
            const columns = [];
            const oldcolumns = [];
            const prjname = ref('');
            const code = ref('');
            const username = ref('');
            const worktype = ref('1');
            const phone = ref('');
            const idcardnum=ref('');
            const cardNum=ref('');
            const showPicker = ref(false);
            const onConfirm = ({ selectedOptions }) => {
                showPicker.value = false;
                prjname.value = selectedOptions[0].text;
                code.value = selectedOptions[0].value;
            };
            const onSubmit = (values) => {
                console.log(values)
                // var data={
                //     openid:sessionStorage.getItem('openid'),
                //     code:values['code'],
                //     phone:values['phone'],
                //     worktype:values['worktype']
                // }
                axios.post('http://bs.bzjsgl.cn/wxapi/Messagetemplate/add_glry_shouquan',{
                        openid: sessionStorage.getItem('openid'),
                        code:values['code'],
                        username:values['username'],
                        phone:values['phone'],
                        idcardnum:values['idcardnum'],
                        cardNum:values['cardNum'],
                        worktype:values['worktype']
                    })
                    .then(res => {
                        if (res.data['code'] === 20000) {
                            showDialog({
                                message:res.data['msg'],
                                theme: 'round-button',
                            }).then(() => {
                                location.href = '#/addglrykqsq'
                            });

                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error)
                    })
            };
            return {
                columns,
                code,
                idcardnum,
                cardNum,
                username,
                worktype,
                phone,
                oldcolumns,
                onConfirm,
                prjname,
                showPicker,
                onSubmit,
                onClickLeft
            }
        },
        data() {
            return {
                keyword: '',
                selectedValue: '',
            };
        },
        mounted() {
            axios.post('http://bs.bzjsgl.cn/wxapi/Messagetemplate/subjectListInfo')
                .then(res => {
                    var newList = res.data['data']
                    if (res.data['code'] === 20000) {
                        for (let i = 0; i < newList.length; i++) {
                            let newItem = { text: newList[i]['value'], value: newList[i]['address'] };
                            this.oldcolumns.push(newItem);
                        }
                        console.log(this.oldcolumns)
                    }
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error)
                })
        },
        methods: {
            onSearch() {
                console.log('搜索关键词：', this.prjname);
                this.showPicker = true;
                this.columns = this.oldcolumns
                console.log(this.columns)
                if (this.prjname === '') {
                    this.$forceUpdate();
                    // return this.columns;
                } else {
                    this.columns =  this.columns.filter(item => item.text.includes(this.prjname));
                    this.$forceUpdate();
                    // return this.columns.filter(item => item.text.includes(this.keyword));
                }
            }
        },
        components: {
            [Search.name]: Search,
            [Form.name]: Form,
            [Field.name]: Field,
            [CellGroup.name]: CellGroup,
            [Picker.name]: Picker,
            [Popup.name]: Popup,
            [showToast.name]:showToast,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Button.name]: Button,
            [showDialog.name]:showDialog,
            [NavBar.name]:NavBar
        }
    }
</script>
